<template>
  <view class="formal-container">
    <!-- 顶部操作栏 -->
    <view class="formal-header">
      <uv-icon class="header-btn" name="arrow-left" size="28" color="#888" @click="goBack" />

      <view class="header-btns">
        <uv-icon class="header-btn" name="play-circle" size="28" color="#888" />

        <uv-icon class="header-btn" name="camera-fill" size="28" color="#888" />

        <uv-icon class="header-btn" name="trash" size="28" color="#888" />
      </view>
      <view class="header-timer"> <bing-countup :end-val="86" /></view>
    </view>

    <!-- 角色头像区 -->
    <view class="role-area">
      <view class="role-avatar interviewer">
        <uv-icon name="account" size="60" color="#fff" />
      </view>
      <view class="role-avatar user">
        <uv-icon name="account" size="60" color="#888" />
      </view>
    </view>
    <view class="role-labels">
      <view class="role-label interviewer">
        <view>面试官</view>
        <view class="role-desc">技术总监</view>
      </view>
      <view class="role-label user">
        <view>我</view>
        <view class="role-desc">应聘者</view>
      </view>
    </view>
    <!-- 语音可视化区 -->
    <view class="voice-visual-card">
      <view class="voice-wave">
        <view
          v-for="i in 16"
          :key="i"
          :class="['wave-bar', i % 3 === 0 ? 'high' : '']"
        ></view>
      </view>
      <view class="voice-speaker"
        >当前发言：<text class="interviewer">面试官</text></view
      >
    </view>
    <!-- 状态提示 -->
    <view class="voice-status-tip">
      <uv-icon
        name="chat"
        size="22"
        color="#7ED0A1"
        style="margin-right: 8rpx"
      />
      对话进行中，请保持良好的语音环境...
    </view>
  </view>
</template>

<script>
import BingCountup from '@/components/bing-countup/bing-countup.vue'
export default {
  name: 'FormalMode',
  components: {
    BingCountup
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.formal-container {
  min-height: 100vh;
  background: #fafafd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.formal-header {
  width: 100vw;
  background: #fff;
  padding: 0 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 2;
  padding: 12rpx 24rpx;
  box-sizing: border-box;
}
.header-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18rpx;
  flex: 1;
}
.header-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2rpx;
  padding: 0;
}

.header-btn.active .uv-icon {
  color: #fff !important;
}
.header-timer {
  font-size: 24rpx;
  color: #888;
  margin-left: 18rpx;
}

.role-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 48rpx;
}
.role-avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}
.role-avatar.interviewer {
  background: $uni-default-color;
}
.role-avatar.user {
  background: #f2f2f2;
}
.role-labels {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 18rpx;
}
.role-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}
.role-label .role-desc {
  font-size: 22rpx;
  color: #bbb;
  font-weight: normal;
  margin-top: 6rpx;
}
.role-label.interviewer {
  color: $uni-default-color;
}
.role-label.user {
  color: #888;
}
.voice-visual-card {
  margin: 80rpx auto 0 auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 0 24rpx 0;
  width: 80vw;
  max-width: 560rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voice-wave {
  display: flex;
  align-items: flex-end;
  height: 60rpx;
  gap: 6rpx;
  margin-bottom: 18rpx;
}
.wave-bar {
  width: 8rpx;
  height: 28rpx;
  background: $uni-default-color;
  border-radius: 4rpx;
  transition: height 0.2s;
}
.wave-bar.high {
  height: 48rpx;
}
.voice-speaker {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}
.voice-speaker .interviewer {
  color: $uni-default-color;
  font-weight: bold;
}
.voice-status-tip {
  margin: 48rpx auto 0 auto;
  color: #888;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
